<template>
  <div class="_wz_cent_main _wz_vehicleQueryUbi">
    <Card :bordered="true" style="margin:0 0 10px;">
      <p slot="title">搜索</p>
      <div slot="extra">
        <Button type="info" size="small" v-if="!searchType" @click="searchType = true" icon="ios-arrow-down">更多</Button>
        <Button type="info" size="small" v-else @click="searchType = false" icon="ios-arrow-up">收起</Button>
      </div>
      <Form :model="formDataSearch" label-position="right" :label-width="100" inline>
        <FormItem label="车牌号">
          <i-input v-model="formDataSearch.vehiclePlateNo" placeholder="车牌号" clearable />
        </FormItem>
        <FormItem label="车架号">
          <i-input v-model="formDataSearch.vehicleFrameNo" placeholder="车架号" clearable />
        </FormItem>
        <FormItem label="发动机号" v-if="searchType">
          <i-input v-model="formDataSearch.vehicleEngineNo" placeholder="发动机号" clearable />
        </FormItem>
        <FormItem label="运输企业" v-if="searchType">
          <i-select v-model="formDataSearch.deptUuid" filterable placeholder="请选择运输企业" clearable>
            <Option v-for="item in subDeptList" :value="item.uuid" :key="item.uuid">{{ item.deptName }}</Option>
          </i-select>
        </FormItem>
        <FormItem label="授权状态" v-if="searchType">
          <i-select v-model="formDataSearch.authState" filterable placeholder="请选择授权状态" clearable>
            <Option :value="0">未授权</Option>
            <Option :value="1">已授权</Option>
          </i-select>
        </FormItem>

        <FormItem>
          <Button type="primary" @click="searchSubmit">搜索</Button>
        </FormItem>
      </Form>
    </Card>
    <Card dis-hover :bordered="true">
      <p slot="title">列表</p>
      <wzTbale ref="wzTbale" :tableData="tableData"></wzTbale>
    </Card>
    <!--查看-->
    <Drawer :title="formOperationTitle" v-model="formOperationType" width="1200" :mask-closable="false">
      <vehicleQueryUbiSee v-if="formOperationType" :selectData="selectData"></vehicleQueryUbiSee>
    </Drawer>

    <Spin size="large" fix v-if="spinShow"></Spin>

  </div>
</template>
<script>

import vehicleQueryUbiSee from './vehicleQueryUbiSee.vue'
import wzTbale from "../../../components/table/table";


export default {
  components: {
    vehicleQueryUbiSee,//
    wzTbale,//列表
  },
  data() {
    return {

      selectData:{},
      subDeptList: [],//运输企业
      spinShow:false,//本页加载
      searchType:false,//搜索条件

      formOperationTitle:'',
      formOperationType:false,
      formDataSearch: {},//搜索表单数据
      tableData: {
        url: this.apiUrl.basicsUserVehicleBasicsUserVehiclePageList,//请求地址
        method: 'post',//请求方式
        where: {},//搜索条件
        height: 'auto',//表格高度 auto
        page: true,//分页是否使用
        columns: [//表头数据
          {type: 'index', width: 80, align: 'center', title: '序号'},
          {title: '车牌号', key: 'vehiclePlateNo', minWidth: 100,},
          {title: '车架号', key: 'vehicleFrameNo', minWidth: 190,},
          {title: '车主业户', key: 'vehicleOwner', minWidth: 120,},
          {title: '车主电话', key: 'vehicleOwnerPhone', minWidth: 120,},
          {title: '发动机号', key: 'vehicleEngineNo', minWidth: 120,},
          {title: '排放标准', key: 'vehicleEmissionStandards', minWidth: 120,},
          {title: '车辆类型', key: 'vehicleType', minWidth: 140,},
          {title: '授权到期', key: 'authTime', minWidth: 150,},
          {title: '运输企业', key: 'deptName', minWidth: 220,},
          {title: '授权状态',  fixed: 'right', minWidth: 130, render: (h, params) => {
              return h('Tag', {props: {type: 'dot',color:  !!params.row.authState?'success':'warning'}}, !!params.row.authState?'已授权':'未授权');
            }
          },
          {
            title: '操作', width: 120, fixed: 'right',
            render: (h, params) => {
              let operationButtons = [];
              //查看
              if(params.row.authState){
                operationButtons.push(h('span', {
                  style: {"color": "#2d8cf0", "cursor": "pointer"},
                  on: {
                    click: () => {
                      var that = this;
                      that.spinShow = true;
                      that.axios.post(that.apiUrl.basicsUserVehicleBasicsUserVehicleUbi, {uuid: params.row.uuid}).then(res => {
                        that.spinShow = false;
                        if (!!res) {
                          if(!!res.data.data && res.data.data.status == '1'){
                            that.selectData = JSON.parse(JSON.stringify(res.data.data));
                            that.formOperationTitle = that.selectData.plateNo + '  车辆测评';
                            that.formOperationType = true;
                          }else{
                            that.$Message.error('未查询到相关结果');
                          }
                        }
                      }).catch(err => {
                        console.log('失败', err);
                      })
                    }
                  }
                }, '测评'))

                operationButtons.push(h('Divider', {props: {type: 'vertical',}}, ''))
              }


              //解绑  删除
              operationButtons.push(h('span', {
                style: {"color": "#2d8cf0", "cursor": "pointer"},
                on: {
                  click: () => {
                    let that = this;
                    that.$Modal.confirm({
                      title: '解绑提醒',
                      content: '确定要解绑选中的记录？',
                      onOk: () => {
                        that.spinShow = true;
                        that.axios.post(that.apiUrl.basicsUserVehicleBasicsUserVehicleUnbind, {uuid: params.row.uuid}).then(res => {
                          that.spinShow = false;
                          if (!!res) {
                            that.$Message.success('解绑成功');
                            that.$refs.wzTbale.tableLoadData();
                          }
                        }).catch(err => {
                          console.log("失败", err)
                        })
                      },
                      onCancel: () => {
                        //点击取消
                      }
                    });
                  }
                }
              }, '解绑'))

              return operationButtons;
            }
          },
        ],
        format: {//返回数据格式
          list: ['data'],//数据list
          count: ['count'],//数据总量
        },
      },
    }
  },
  beforeCreate() {//beforeCreate创建前状态

  },
  created() {//created创建完毕状态
  },
  beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

  },
  mounted() {//mounted 挂载结束状态
    let that = this;


    //运输企业
    that.axios.post(that.apiUrl.coreDeptCoreDeptList, {}).then(res => {
      if (!!res) {
        that.subDeptList = res.data.data;
      }
    }).catch(err => {
      console.log("失败", err)
    })
  },
  methods: {//执行的方法
    //搜索
    searchSubmit() {//搜索
      this.tableData.where = JSON.parse(JSON.stringify(this.formDataSearch));
      this.$refs.wzTbale.tableLoadData(true);
    },
  },
  watch: {//监听

  },
  props: {//接收来自父组件的数据

  },
  beforeUpdate() {//beforeUpdate 更新前状态

  },
  updated() {//updated 更新完成状态

  },
  beforeDestroy() {//beforeDestroy 销毁前状态

  },
  destroyed() {//destroyed 销毁完成状态

  }
}
</script>


<style lang="less">
._wz_vehicleQueryUbi {
  height: 100%;
  display: flex;
  flex-direction: column;
}
</style>
